<!doctype html>
[#escape x as (x)!?html]
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>用户注册 - ${site.seoTitle} - Powered by JPROCMS</title>
  [#include '../includes/common_res.html'/]
  <link rel="stylesheet" href="${resource}/static/plugins/aj-captcha/css/verify.css">
  <script src="${resource}/static/plugins/crypto-js/crypto-js.min.js"></script>
  <script src="${resource}/static/plugins/sm-crypto/dist/sm2.js"></script>
  <script src="${resource}/static/plugins/aj-captcha/js/crypto-js.js"></script>
  <script src="${resource}/static/plugins/aj-captcha/js/ase.js"></script>
  <script src="${resource}/static/plugins/aj-captcha/js/verify.js"></script>
</head>
<body class="bg-light">
<div class="container my-3 my-md-4 my-lg-5">
  <div class="row justify-content-center">
    <div class="col col-md-6 col-lg-5 col-xl-5 reg-box">
      <h3 class="reg-logo text-center">
        <a href="/"><b>JPROCMS</b></a> <span>注册</span>
      </h3>

      <div class="reg-box-body rounded p-4 mt-4" style="background-color:#fff;border:1px solid #ccc;">
        <form class="mb-2" id="validForm" action="${api}/user/register" method="post">
          <div class="form-group">
            <label class="sr-only" for="username">用户名</label>
            <input type="text" class="form-control" id="username" name="username" placeholder="用户名" title="请输入用户名" required
                   maxlength="${config.registerConfig.usernameMaxLength}"
                   data-rule-minlength="${config.registerConfig.usernameMinLength}" data-msg-minlength="用户名不能少于 ${config.registerConfig.usernameMinLength} 个字符"
                   data-rule-remote="${api}/member/usernameNotExist" data-msg-remote="用户名已存在">
            <!--<small class="form-text text-muted">4~18个字符，可使用字母、数字、下划线</small>-->
          </div>
          <div class="form-group">
            <label class="sr-only" for="password">密码</label>
            [#if config.securityConfig.passwordStrength == 1]
              [#assign dataMsgPattern='密码中必须包含字母、数字']
            [#elseif config.securityConfig.passwordStrength == 2]
              [#assign dataMsgPattern='密码中必须包含大写字母、小写字母、数字']
            [#elseif config.securityConfig.passwordStrength == 3]
              [#assign dataMsgPattern='密码中必须包含字母、数字、特殊字符']
            [#elseif config.securityConfig.passwordStrength == 4]
              [#assign dataMsgPattern='密码中必须包含大写字母、小写字母、数字、特殊字符']
            [#else]
              [#assign dataMsgPattern='密码可以是任意字符']
            [/#if]
            <input type="password" class="form-control" id="password" name="password" placeholder="密码" autocomplete="off" title="请输入密码" required
                   maxlength="${config.securityConfig.passwordMaxLength}"
                   data-rule-minlength="${config.securityConfig.passwordMinLength}" data-msg-minlength="密码不能少于 ${config.securityConfig.passwordMinLength} 个字符"
                   data-rule-pattern="${config.securityConfig.passwordPattern}" data-msg-pattern="${dataMsgPattern}">
          </div>
          <div class="form-group">
            <label class="sr-only" for="confirmPassword">确认密码</label>
            <input type="password" class="form-control" id="confirmPassword" placeholder="确认密码" autocomplete="off" title="请确认密码" required
                   data-rule-equalTo="#password" data-msg-equalTo="两次输入不相同">
          </div>
          [#-- 不验证或人工验证，需提供验证码 --]
          [#if config.registerConfig.verifyMode == 1 || config.registerConfig.verifyMode == 2]
          <div id="captcha-containerId"></div>
          <input type="hidden" name="captchaVerification" id="captchaVerification">
          [#-- 邮箱地址验证 --]
          [#elseif config.registerConfig.verifyMode = 3]
            <div class="form-group">
              <label class="sr-only" for="email">邮箱地址</label>
              <input type="text" class="form-control" id="email" name="email" placeholder="邮箱地址" autocomplete="off" required title="请填写邮箱地址"
                     data-rule-email="true" data-msg-email="请填写有效的邮箱地址" data-rule-remote="${api}/member/emailNotExist" data-msg-remote="邮箱地址已存在">
            </div>
            <div class="form-group">
              <label class="sr-only" for="emailMessageValue">邮件验证码</label>
              <div class="input-group">
                <input type="text" class="form-control" id="emailMessageValue" name="emailMessageValue" placeholder="邮件验证码" autocomplete="off" required title="请填写邮件验证码"
                       data-msg-remote="邮件验证码不正确">
                <span class="input-group-append"><button class="btn btn-secondary" id="emailMessageButton" type="button">获取邮件验证码</button></span>
              </div>
          [#-- 手机号码验证 --]
          [#elseif config.registerConfig.verifyMode = 4]
            <div class="form-group">
              <label class="sr-only" for="mobile">手机号码</label>
              <input type="text" class="form-control" id="mobile" name="mobile" placeholder="手机号码" autocomplete="off" required title="请填写手机号码"
                     data-rule-pattern="^1\d{10}$" data-msg-pattern="请填写有效的手机号码" data-rule-remote="${api}/member/mobileNotExist" data-msg-remote="手机号码已存在">
            </div>
            <div class="form-group">
              <label class="sr-only" for="mobileMessageValue">短信验证码</label>
              <div class="input-group">
                <input type="text" class="form-control" id="mobileMessageValue" name="mobileMessageValue" placeholder="短信验证码" autocomplete="off" required title="请填写短信验证码"
                       data-msg-remote="短信验证码不正确">
                <span class="input-group-append"><button class="btn btn-secondary" id="mobileMessageButton" type="button">获取短信验证码</button></span>
              </div>
            </div>
          [/#if]
          <button type="submit" id="registerBtn" class="btn btn-primary btn-block">注册</button>

          <div class="text-center mt-2">
            <small><a href="${base}/login">登录</a></small>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
[#include '../includes/inc_msg.html'/]
[#include '../includes/inc_valid_msg.html'/]
<script>
  var publicKey='';
  axios.get('${api}/user/get-client-public-key',{headers: {'Tenant-Id': Cms.getTenantId()}}).then(function (response) {
    publicKey = response.data.data;
  });

  function sm2Encrypt(message) {
    // 1 - C1C3C2，0 - C1C2C3，默认为1
    const cipherMode = 1 
    let encryStr=sm2.doEncrypt(message, publicKey, cipherMode);
    return encryStr;
  }
  [#if config.registerConfig.verifyMode == 1 || config.registerConfig.verifyMode == 2]
  $('#captcha-containerId').slideVerify({                                                
      baseUrl:'${base}',  //服务器请求地址;
      containerId:'registerBtn',//pop模式 必填 被点击之后出现行为验证码的元素id
      mode:'pop',     //展示模式
      imgSize : {       //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
          width: '400px',
          height: '200px',
      },
      barSize:{          //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
          width: '400px',
          height: '40px',                                                                                                                                                                                                                                                                                                                                               
      },
      beforeCheck:function(){  //检验参数合法性的函数  mode ="pop"有效
          let flag = true;
          //实现: 参数合法性的判断逻辑, 返回一个boolean值
          return flag
      },
      ready : function() {},  //加载完毕的回调
      success : function(params) { //成功的回调
          // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
          //例如: login($.extend({}, params))
          $("#captchaVerification").val(params.captchaVerification)
          $("#validForm").submit()
      },
      error : function() {
        alertTip("验证码错误");
      }        //失败的回调
  });
  [/#if]
  $(function () {
    $('#username').focus().select();
    var validator = $('#validForm').validate({
      submitHandler: function (form,event) {
        event.preventDefault();
        const formData = $(form).serializeJSON();
        if (formData.password) {
          formData.password = sm2Encrypt(formData.password);
        }
        axios.post(form.action, formData, {headers: {
              'Tenant-Id': Cms.getTenantId(),
            }}).then(function (response) {
            if (response.data.data === -1) {
              //待审核
              alertTip('待审核');
              location.href="${base}/"
            }else if (response.data.code == 0) {
              successTip();
              location.href="${base}/"
            } else {
              alertTip(response.data.msg)
              window.location.reload()
            }
          });
      }
    });
    $('#emailMessageButton').click(function () {
      let email = $("#email").val();
      if (!Cms.isValidEmail(email)) {
        $("#email").focus()
        return
      }
      //会员注册场景4
      sendEmailMessage($('#email'), 4);
    });
    $('#mobileMessageButton').click(function () {
      let phoneNumber = $("#mobile").val();
      if (!Cms.isValidPhoneNumber(phoneNumber)) {
        $("#mobile").focus()
        return
      }
      sendMobileMessage( $('#mobile'), 4);
    });
    [#if config.registerConfig.verifyMode == 1 || config.registerConfig.verifyMode == 2]
      //不能点击按钮提交，需要先触发验证码
      $("#registerBtn").attr("type","button");
    [/#if]
  });

</script>
</body>
</html>
[/#escape]
